import React, { Component, PropTypes } from 'react';
import Relay from 'react-relay';
import { Button, Modal } from 'antd';
import Page from '../Page/PageComponent';
import styles from './Company.scss';
import DeleteCompanyMutation from "../../relay/account/DeleteCompanyMutation";
import UpdateCompanyMutation from "../../relay/account/UpdateCompanyMutation";
import Table from '../Table/Table';
import AddCompanyMutation from '../../relay/account/AddCompanyMutation';
import APForm from '../Form/Form'

class CompanyListComponent extends Component {
  state = {
    showNewCompanyModal: false,
    showEditCompanyModal: false,
    updateCompany: undefined,
  };

  deleteCompany = (company) => {
    console.log(company)
    Relay.Store.commitUpdate(
      new DeleteCompanyMutation({ payload: { id: company.id }, viewer: this.props.viewer }), {
        onSuccess: () => {},
        onFailure: () => {},
      }
    );
  };

  stopCompany = (company) => {
    Relay.Store.commitUpdate(
      new UpdateCompanyMutation({ payload: { id: company.id, status: !company.status }, companyId: company.id }), {
        onSuccess: () => {},
        onFailure: () => {},
      }
    );
  };

  editCompany = (company) => {
    this.setState({ updateCompany: company, showEditCompanyModal: true });
  };

  render() {
    const { viewer } = this.props;
    const keys = [
      {name:"name", display:"名称", onClick: (data) => this.context.router.push(`/company/${data.id}`)},
      {name:"email",display:"邮箱"},
      {name:"phone",display:"电话"},
      {name:"city",display:"城市"},
      {name:"address",display:"地址"},
      {name:"note",display:"备注"},
    ];
    return (
      <div>
        <Page heading='公司列表'>
          <Table
            keys={keys}
            data={viewer.companies.edges}
            styles={styles}
            operations={
              [
                {
                  title: '编辑',
                  type: 'primary',
                  callback: this.editCompany,
                },
                {
                  title: (company) => company.status ? '停用' : '启用',
                  callback: this.stopCompany,
                },
                {
                  title: '删除',
                  type: 'danger',
                  callback: this.deleteCompany
                },
              ]
            }
          />
          <Button type="primary"
            onClick={() => this.setState({ showNewCompanyModal: true })}
          >增加公司</Button>
          <Modal
            title="新增公司"
            visible={this.state.showNewCompanyModal}
            footer={null}
          >
            <APForm
              viewer={this.props.viewer}
              mutation={AddCompanyMutation}
              mutationData={{viewer: this.props.viewer}}
              fields={
                [
                  {name: "name", placeholder: "公司名称"},
                  {name: "email", placeholder: "邮箱"},
                  {name: "phone", placeholder: "电话"},
                  {name: "city", placeholder: "城市"},
                  {name: "address", placeholder: "地址"},
                  {name: "note", placeholder: "备注"},
                ]
              }
              onSubmit={() => {this.setState({ showNewCompanyModal: false })}}
              onCancel={() => {this.setState({ showNewCompanyModal: false })}}
            />
          </Modal>

          <Modal
            title="编辑公司"
            visible={this.state.showEditCompanyModal}
            footer={null}
          >
            <APForm
              viewer={this.props.viewer}
              data={this.state.updateCompany}
              fields={
                [
                  {name: "name", placeholder: "公司名称"},
                  {name: "email", placeholder: "邮箱"},
                  {name: "phone", placeholder: "电话"},
                  {name: "city", placeholder: "城市"},
                  {name: "address", placeholder: "地址"},
                  {name: "note", placeholder: "备注"},
                ]
              }
              mutation={UpdateCompanyMutation}
              mutationData={{payload: { id: this.state.updateCompany ? this.state.updateCompany.id : null }}}
              onSubmit={() => {this.setState({ showEditCompanyModal: false })}}
              onCancel={() => {this.setState({ showEditCompanyModal: false })}}
            />
          </Modal>
        </Page>
      </div>
    )
  }
}

CompanyListComponent.propTypes = {
  viewer: PropTypes.object,
};

CompanyListComponent.contextTypes = {
  router: PropTypes.object.isRequired,
};

export default Relay.createContainer(CompanyListComponent, {
  initialVariables: {
    defaultFirst: 1000,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        id
        companies(first: $defaultFirst){
          edges{
            node{
              id
              name
              email
              phone
              city
              address
              note
              status
            }
          }
        }
      }
    `
  }
});
